<template>
	<view class="box-wp">
		<view class="goods-main-img">
			<image mode="widthFix" class="main-img" :src="goodsInfo.image">
			</image>
			<view class="goods-info">
				<view class="title u-line-1">
					{{goodsInfo.name}}
				</view>
				<view class="price-wp" v-if="goodsInfo.price">
					￥ {{goodsInfo.price}}
				</view>
			</view>
			<view class="padding-bar">
			</view>
		</view>
		<view class="goods-main-info">
			<view class="sell">
				<view class="avatar">
					<u--image v-if="goodsInfo.shopHead" shape="circle" :src="goodsInfo.shopHead" width="64rpx"
						height="64rpx"></u--image>
					<u--image shape="circle" src="https://file.casugn.com/storecompcard/temp/男_1705454811406.png" v-else
						width="64rpx" height="64rpx"></u--image>
				</view>
				<view class="sell-name">
					{{goodsInfo.shopUser}}
					<text class="friend-tag" v-if="goodsInfo.buddy==1">好友</text>
				</view>
			</view>
		</view>

		<goods-item :list="goodsList" :goodsOpenId="goodsInfo.openId"></goods-item>

		<view class="bottom-box" v-if="showBuyBtn">
			<u-button @click="order" :custom-style="{
			  background: '#276aee',
			  color: '#fff',
			  width: '682rpx',
			  border:'none'
			}">购买大礼包</u-button>

		</view>
		<view class="bottom-box" v-else>
			<u-button openType="share" :custom-style="{
			  background: '#276aee',
			  color: '#fff',
			  width: '682rpx',
			  border:'none'
			}">分享赠送</u-button>

		</view>
	</view>
</template>

<script>
	import goodsItem from '@/pagesMall/components/goodsItem/goodsItem.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			goodsItem
		},
		data() {
			return {
				goodsId: '',
				goodsInfo: {},
				gooodsDetailImg: [],
				goodsList: [],
				showBuyBtn: true,
				goodsOwnerOpenId: ''
			};
		},
		onLoad(opt) {
			if (opt.id) {
				this.goodsId = opt.id
				this.goodsOwnerOpenId = opt.openId
				this.showBuyBtn = opt.hiddenBuyBtn == 1 ? false : true
				this.getGoodsInfo()
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			order() {
				uni.navigateTo({
					url: `/pagesMall/mallCenter/giftOrder?goodsId=${this.goodsId}&hiddenBuyBtn=1&openId=${this.goodsOwnerOpenId}`
				})
			},
			async getGoodsInfo() {
				let res = await this.$api.getMsGiftPacksPageDetail({
					id: this.goodsId,
					openId: this.goodsOwnerOpenId
				})
				if (res.success) {
					console.log(res.result);
					this.goodsInfo = res.result
					this.goodsList = res.result.msGiftProdVOList || []


				} else {
					this.goodsInfo = {}
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
			},
			callMe() {
				if (this.goodsInfo.shopMobile) {
					this.goodsInfo.shopMobile = this.goodsInfo.shopMobile + ''
					uni.makePhoneCall({
						phoneNumber: this.goodsInfo.shopMobile
					})
				} else {
					uni.showToast({
						title: '未留联系方式',
						icon: 'none'
					})
				}
			},

		},
		onShareAppMessage(e) {
			console.log(e);
			if (e.from == 'menu') {
				uni.showToast({
					icon: 'none',
					title: '请点击下方分享按钮分享'
				})
				return
			}
			if (!this.userInfo.id) {
				uni.showToast({
					title: '请先创建名片',
					icon: 'none'
				})
				return
			}
			uni.showLoading({

			})
			let that = this
			if (!that.showBuyBtn) {
				//赠送模式
				let promise = new Promise(resolve => {
					let {
						openId,
					} = that.userInfo

					let payload = {
						id: that.goodsInfo.id,
						openId
					}
					this.$api.addGiftPresenteds(payload).then(res => {
						uni.hideLoading()
						if (res.success) {
							console.log(res.result, 'res');
							resolve({
								title: `${that.goodsInfo.shopUser?that.goodsInfo.shopUser:'您的好友'}赠送给您${that.goodsInfo.name?that.goodsInfo.name:'礼物'}`,
								path: `/pagesMall/sharePage/sharePage?orderId=${res.result
									}&openId=${that.goodsOwnerOpenId}&type=gifts&giftId=${that.goodsId}`,
								imageUrl: that.goodsInfo.imgae,
							})
						} else {
							uni.showToast({
								title: '生成分享页面失败,引导进入首页',
								icon: 'none'
							})
						}
					})
				})
				return {
					promise,
					title: `我的拜帖`,
					path: '/pages/card/card',
				}
			} else {

			}

		},
	}
</script>
<style lang="scss" scoped>
	.box-wp {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);

		.goods-main-img {
			.main-img {
				width: 750rpx;
			}

			.goods-info {
				margin-top: -10rpx;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				padding: 32rpx;
				z-index: 2;

				.title {
					width: 740rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #1D2129;
					line-height: 45rpx;

				}

				.price-wp {
					margin-top: 20rpx;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 600;
					color: #FF3131;
					line-height: 50rpx;

				}
			}

			.padding-bar {
				clear: both;

				height: 40rpx;
				background-color: #f7f8fa;
			}

		}

		.goods-main-info {
			padding: 32rpx;

			.sell {
				height: 64rpx;
				display: flex;

				.sell-name {
					margin-left: 20rpx;
					height: 60rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 60rpx;

					.friend-tag {
						margin-left: 16rpx;
						text-align: center;
						display: inline-block;
						width: 80rpx;
						height: 34rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #4E5969;
						line-height: 34rpx;
						border: 1rpx solid #E5E6EB;
						border-radius: 6rpx;


					}
				}
			}

			.info {
				margin-top: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #4E5969;
				display: flex;

				.title1 {
					width: 180rpx;
				}

				.title2 {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #1D2129;
					line-height: 39rpx;

				}
			}
		}


	}
</style>